<template>
  <van-overlay :show="popShow" class-name="result_overlay">
    <div class="result_wrapper" @click.stop>
      <div class="content">
        <template v-if="cardPic">
          <img class="answer_right_icon" :src="cardBaseUrl + cardPic" alt="" srcset="">
        </template>
        <template v-else-if="result">
          <img class="answer_right_icon" src="https://jwc-static.jdwxk.com/imgs/activities/answer_right.png" alt="" srcset="">
        </template>
        <template v-else>
          <img class="answer_error_icon" src="https://jwc-static.jdwxk.com/imgs/activities/answer_error.png" alt="" srcset="">
        </template>

        <div class="text" v-html="description.replace(/\n/g, '<br>')" />
        <van-button type="default" block class="readOver_btn" @click="close">
          确认
        </van-button>
      </div>
      <div class="close_btn" @click="close">
        <van-icon class="close_icon" name="cross" color="white" size="30" />
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import { defineExpose, ref } from 'vue'

const cardBaseUrl = ref(import.meta.env.VITE_GLOB_IMG_URL)

// const router = useRouter()
// function back() {
//   router.back()
// }
const result = ref(false)
const description = ref('')
const cardPic = ref('')

const popShow = ref(false)
function open(res) {
  const { isRight, message } = res
  result.value = isRight
  description.value = message
  popShow.value = true
  if (res.cardPic) {
    cardPic.value = res.cardPic
  }
}
function close() {
  popShow.value = false
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.result_overlay {
  z-index: 10;
  .result_wrapper {
    position: fixed;
    z-index: 11;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .content {
    width: 326px;
    // min-height: 290px;
    height: auto;
    border-radius: 12px;
    border: 2.5px solid #b67565;
    background: white;
    position: relative;
    padding: 36px;

    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .answer_right_icon {
      width: 156px;
      height: 99px;
    }
    .answer_error_icon {
      width: 148px;
      height: 72px;
    }
    .text {
      color: #663c2a;
      font-size: 15px;
      line-height: 25.5px;
      font-weight: 700;
      text-align: center;
    }
    .readOver_btn {
      flex-shrink: 0;
      width: 144px;
      height: 34px;
      background: #c19760;
      border-radius: 30px;
      color: white;
    }
  }
  .close_btn {
    flex-shrink: 0;
    width: 58.5px;
    height: 58.5px;
    border-radius: 58.5px;
    border: 2.5px solid white;
    margin-top: 20px;
    display: flex;
    align-content: center;
    justify-content: center;
    .close_icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
